<template>
	<div class="sw_chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts';
import eleResize from 'element-resize-detector';
export default {
	name: 'swCharts',
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			swchart: null,
			option: {
				series: {
					type: 'gauge',
					startAngle: 180,
					endAngle: 0,
					center: ['50%', '75%'],
					radius: '90%',
					min: 0,
					max: 1,
					splitNumber: 6,
					axisLine: { lineStyle: { width: 6, color: [[0.3333, '#FF6E76'], [0.6666, '#58D9F9'], [1, '#7CFFB2']] } },
					pointer: {
						icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
						length: '12%',
						width: 20,
						offsetCenter: [0, '-60%'],
						itemStyle: { color: 'auto' }
					},
					axisTick: { length: 12, lineStyle: { color: 'auto', width: 2 } },
					splitLine: { length: 20, lineStyle: { color: 'auto', width: 5 } },
					axisLabel: {
						color: '#464646',
						fontSize: 20,
						distance: -60,
						rotate: 'tangential',
						formatter: function (value) {
							if(value === 0.6666) {
								return 'Grade B';
							} else if(value === 0.5) {
								return 'Grade C';
							} else if(value === 0.3333) {
								return 'Grade D';
							}
							return '';
						}
					},
					title: {
						offsetCenter: [0, '-10%'],
						fontSize: 20
					},
					detail: {
						fontSize: 30,
						offsetCenter: [0, '-35%'],
						valueAnimation: true,
						formatter: value => Math.round(value * 100) + '',
						color: 'inherit'
					},
					data: [{ value: 0.2, name: 'Grade Rating' }]
				}
			}
		};
	},
	watch: {
		option: {
			handler(data) {
				this.$nextTick(() => {
					this.swchart.setOption(data);
				});
			},
			immediate: true,
			deep: true
		}
	},
	mounted() {
		this.initializeEcharts();
	},
	methods: {
		//初始化图表
		initializeEcharts() {
			this.swchart = echarts.init(this.$refs.chart);
			eleResize().listenTo(this.$refs.chart, ele => {
				this.$nextTick(() => {
					this.swchart.resize();
				});
			});
		}
	}
};
</script>

<style scoped>
.sw_chart {
	width: 100%;
	height: 100%;
}
</style>